import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

Item {
    id: item1
    width: 400;
    height: 600;

    property alias lblTitle: lblTitle;
    property alias mediaList: mediaList;
    property alias btnPlay: btnPlay;
    property alias btnStop: btnStop;
    property alias sldProgress: sldProgress;
    property alias sldVolume: sldVolume;

    RowLayout{
        id: lblRow;
        height: 30;
        width: parent.width;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.topMargin: 30;
        anchors.horizontalCenter: parent.horizontalCenter;
        Label{
            id: lblTitle;
            width:200;
            anchors.left: parent.left;
            anchors.top: parent.top;
            text: ""
        }
        Label{
            id: lblTimer;
            text: "00:00/00:00";
            anchors.right: parent.right;
            anchors.top: parent.top;
        }
    }
    Slider{
        id:sldProgress;
        height: 20;
        width: lblRow.width;
        anchors.top: lblRow.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        value: player.position/player.duration;
    }
    Row{
        id: btnRow;
        height: 30;
        width: lblRow.width
        anchors.top: sldProgress.bottom;
        anchors.topMargin: 20;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        Button{
            id: btnPlay;
            text: qsTr("Play");
            height:30;
            anchors.left: parent.left;
        }
        Button{
            id: btnStop;
            text: qsTr("Stop");
            height:30;
            anchors.left: btnPlay.right;
        }
        Label {
            id: lblVolume
            text: qsTr("Volume")
            anchors.verticalCenter: parent.verticalCenter;
            anchors.right: sldVolume.left;
            anchors.rightMargin: 10;
        }

        Slider{
            id: sldVolume;
            width:120;
            value: player.volume
            anchors.verticalCenter: parent.verticalCenter;
            anchors.right:parent.right;
        }

    }
    Rectangle{
        border.width: 1;
        border.color: "black";
        width: parent.width;
        anchors.right: parent.right;
        anchors.rightMargin: 20;
        anchors.top: btnRow.bottom;
        anchors.topMargin: 20;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 20;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        ListView{
            id: mediaList;
            width: parent.width;
            height: parent.height;
            currentIndex: -1;
            model: mediaModel;
            delegate: Item{
                height: 40;
                width: parent.width;
                Rectangle{
                    width:parent.width;
                    height: parent.height;
                    border.width: 1;
                    border.color: "darkgray";
                    MouseArea{
                        anchors.fill: parent;
                        onDoubleClicked: mediaList.currentIndex = index;
                    }
                    Text{
                        text: name;
                        anchors.left: parent.left;
                        anchors.leftMargin: 10;
                        anchors.verticalCenter: parent.verticalCenter;
                    }
                    Text{
                        id: txtUrl;
                        text: url;
                        visible: false;
                    }
                }
            }
        }
    }
}
